<template>
	<view>
		<view class="topnav">
			<van-nav-bar
			  title="我的地址"
			  right-text="管理"
			  left-arrow
			  @click-left="onClickLeft"
			  @click-right="onClickRight"
			/>
		</view>
		<view class="main">
			<scroll-view scroll-y="true" class="scr" show-scrollbar="false">
				<view class="item" v-for="(item,index) in addList" :key="index">
					<view class="left">
						<view class="tex1">
							<text class="name">{{item.aname}}</text>
							<text class="tel">{{item.tel}}</text>
							<text class="mr" v-if="item.isDefault=='true'">默认</text>
						</view>
						<view class="tex2">
							<text>{{item.addres}}</text> 
						</view>
					</view>
					<view class="right">
						<van-icon name="edit" @click="editAddrs" />
					</view>
				</view>
			</scroll-view>
		</view>
		
		<!-- 这是底部固定 -->
		<view class="btm">
			<van-button round color="#085710" type="info" size="large" @click="toAddress">新增地址</van-button>
		</view>
	</view>
</template>

<script>
	import store from '../../store/index.js'
	import {Address, GetAddress} from '../../request/api.js'
	export default {
		data() {
			return {
				addList:[],
				uid:''
			}
		},
		methods: {
			// 导航栏左边点击
			onClickLeft(){
				uni.navigateBack({
					delta: 1
				});
			},
			// 导航栏右边点击
			onClickRight(){
				
			},
			toAddress(){
				uni.navigateTo({
					url:'/pages/address/address'
				})
			},
			editAddrs(){
				
			},
			Address(id){
				GetAddress(id,(res)=>{
					this.addList = [...res]
					// 找到 isDefault 为true的下标
					let index = this.addList.findIndex(item => item.isDefault=='true')
					// 拿到第一个位置的数据
					let frist = this.addList[0]
					this.addList[0] = this.addList[index]
					this.addList[index] = frist
					uni.setStorage({
						key:'addList',
						data:this.addList
					})
				})
			}
		},
		onLoad(){
			this.uid = store.state.user.addre
			this.Address(this.uid)
			// this.addList = store.state.addlist
		}
	}
</script>

<style lang="less">
page{
	background-color: #f3f3f3;
}
.main{
	box-sizing: border-box;
	width: 100%;
	min-height: 1000rpx;
}
.scr{
	white-space: nowrap;
	height: 1000rpx;
	padding: 30rpx;
	box-sizing: border-box;
	.item{
		margin-bottom: 15rpx;
		width: 100%;
		height: 160rpx;
		background-color: white;
		border-radius: 10px;
		box-sizing: border-box;
		padding: 0px 30rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
		.tel{
			font-size: 26rpx;
			color: #cccccc;
			margin: 0px 8px;
		}
		.mr{
			display: inline-block;
			width: 80rpx;
			height: 40rpx;
			text-align: center;
			line-height: 40rpx;
			color: #085710;
			border: 1px solid #085710;
		}
		.tex2{
			margin-top: 10rpx;
			width: 440rpx;
			overflow: hidden;
			text-overflow: ellipsis;
			white-space: nowrap;
			text{
				margin-right: 10rpx;
			}
		}
		.left{
			width: 500rpx;
		}
	}
}
.btm{
	position: fixed;
	bottom: 0;
	background-color: white;
	width: 100%;
	height: 120rpx;
}
</style>
